import React, { Component } from "react";
import ReactDOM from "react-dom";
import { fetchList } from "../action/counter.js";
import { connect } from "react-redux";
import Button from "./Button";
import FooterAll from "./FooterAll";
import { setcookie, getcookie, delcookie } from "./cookie";
import $ from "jquery";

class List extends Component {
  componentWillUnmount() {
    $("html").scrollTop(0);
    $(window).off();
  }
  componentDidMount() {
    $(window).on('scroll',function(){
      if($('html').scrollTop()>200){
        $('.mainHeader').hide();
      }else{
        $('.mainHeader').show();
      }

    })
    $("body").css("overflow", "auto");
    var productList = "";
    fetch("http://10.31.160.71:3000/product/list", {
      method: "POST",
      mode: "cors",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      },
      body: `rows=22`
    }).then(function(res) {
      res.json().then(function(json) {
        console.log(json.rows);
        for (let i = 0; i < json.rows.length; i++) {
          productList += `
                        <div class="outer-box clear">
                            <img src="${json.rows[i].url1}" data-id='${
            json.rows[i]._id
          }' class='cookieproduct'/>
                            <div class="inner-box">
                                <span> ${json.rows[i].name}</span>
                                <span>$${json.rows[i].price}</span>
                             
                            </div>
                            <div class="addToCart">
                                 <a href="javascript:;" class='add-btn'>Details</a>  
                            </div>
                        </div>

                        `;
        }
        $(".product-list").html(productList);

        $(".outer-box").hover(
          function() {
            $(this)
              .find(".addToCart")
              .show();
          },
          function() {
            $(this)
              .find(".addToCart")
              .hide();
          }
        );

        $(".addToCart").click(function() {
          var cookieId = $(this)
            .siblings(".cookieproduct")
            .attr("data-id");

          setcookie("pId", cookieId);
          $(location).prop("href", "http://localhost:8080/#/productd");
        });
      });
    });
    $(".product-p").click(function() {
      $(".product-list").html(productList);
    });

    /* -------------------------cate ----------------------------*/
    $(".list_nav .text-center li a").click(function() {
      var that = this;
      var productCate = $(this).attr("type");
      var cateList = "";
      cateList += `<p class='logoBanner'>${$(that).html()}</p>`;
      fetch("http://10.31.160.71:3000/cate/list/" + productCate, {
        method: "GET"
      }).then(function(res) {
        res.json().then(function(json) {
          for (let j = 0; j < json.length; j++) {
            fetch("http://10.31.160.71:3000/product/list", {
              method: "POST",
              mode: "cors",
              headers: {
                Accept: "application/json",
                "Content-Type":
                  "application/x-www-form-urlencoded; charset=UTF-8"
              },
              body: `rows=22&cateId=${json[j]._id}`
            }).then(function(res) {
              res.json().then(function(json) {
                console.log(json);
                for (let i = 0; i < json.rows.length; i++) {
                  cateList += `
                                    <div class="outer-box clear">
                                        <img src="${json.rows[i].url1}" />
                                        <div class="inner-box">
                                            <span> ${json.rows[i].name}</span>
                                            <span>$${json.rows[i].price}</span>
                                         
                                        </div>
                                        <div class="addToCart">
                                             <a href="" class='add-btn'>Details</a>  
                                        </div>
                                    </div>
                                    `;
                }
                $(".product-list").html(cateList);
                $(".outer-box").hover(
                  function() {
                    $(this)
                      .find(".addToCart")
                      .show();
                  },
                  function() {
                    $(this)
                      .find(".addToCart")
                      .hide();
                  }
                );
              });
            });
          }
        });
      });
    });

    /* ---------------lazyload--------------------------- */

    /* ------------------dropdown-------------------------- */

    $(function() {
      const $btn = $(".list_nav .text-center li").not(".hideli");
      const $div = $(".dropdown ul");
      const $li = $(".dropdown ul li");
      const $bottomli = $(".dropdown ul li .bottom-line");
      $btn.hover(function() {
        /* $(this).addClass('active').siblings('button').removeClass('active'); */
        $div
          .eq($(this).index())
          .show()
          .siblings(".dropdown ul")
          .hide();
        if ($(".dropdown").css("display") == "none") {
          $(".dropdown").slideDown();
        }
      }),
        $(".hideli").hover(function() {
          $(".dropdown").hide();
        }),
        $(".dropdown").hover(
          function() {
            $(".dropdown").show();
          },
          function() {
            $(".dropdown").slideUp();
          }
        );

      $li.hover(
        function() {
          var htmla = "";
          $(this)
            .find(".bottom-line")
            .animate(
              {
                width: "100%"
              },
              400
            );
          var id = $(this).attr("data-id");
          if (id != null) {
            fetch("http://10.31.160.71:3000/product/list", {
              method: "POST",
              mode: "cors",
              headers: {
                Accept: "application/json",
                "Content-Type":
                  "application/x-www-form-urlencoded; charset=UTF-8"
              },
              body: `cateId=${id}`
            }).then(function(res) {
              res.json().then(function(json) {
                for (let i = 0; i < json.rows.length; i++) {
                  htmla += ` 
                                            <a>${json.rows[i].name}
                                                <div class="bottom-line"></div>
                                            </a>
                                        `;
                }
                $(".second-menu").html(htmla);
              });
            });
          }
        },
        function() {
          $(this)
            .find(".bottom-line")
            .stop(true, true)
            .animate(
              {
                width: "0"
              },
              400
            );
          $(".second-menu a").hover(
            function() {
              $(".second-menu").html(htmla);
              console.log(1);
              $(this)
                .find(".bottom-line")
                .animate(
                  {
                    width: "100%"
                  },
                  400
                );
            },
            function() {
              $(this)
                .find(".bottom-line")
                .stop(true, true)
                .animate(
                  {
                    width: "0"
                  },
                  400
                ),
                $(".second-menu").empty();
            }
          );
          $(".second-menu").empty();
        }
      );
    });
  }
  render() {
    return (
      <div className="back">
        <header id="header">
          <div className="container">
            <div className="row" />
          </div>

          <nav className="list_nav">
            <ul className="text-center">
              <li>
                <a href="javascript:;" type="0">
                  &nbsp;Aston Martin&nbsp;
                </a>
              </li>

              <li>
                <a href="javascript:;" type="1">
                  Lamborghini
                </a>
              </li>

              <li>
                <a href="javascript:;" type="2">
                  &nbsp;Porsche&nbsp;
                </a>
              </li>

              <li>
                <a href="javascript:;" type="3">
                  &nbsp;Ferrari&nbsp;
                </a>
              </li>

              <li className="hideli">
                <a href="">&nbsp;配置您的爱车&nbsp;</a>
              </li>

              <li className="hideli">
                <a href="">&nbsp;Q by Aston Martin&nbsp;</a>
              </li>

              <li className="hideli">
                <a href="">&nbsp;经销商&nbsp;</a>
              </li>

              <li className="hideli">
                <a href="">&nbsp;预定试驾&nbsp;</a>
              </li>

              <li className="hideli">
                <a title="&amp;nbsp;微信&amp;nbsp;" href="">
                  &nbsp;微信&nbsp;
                </a>
              </li>
            </ul>
          </nav>
        </header>
        <div className="dropdown clear">
          <ul>
            <li data-id="5aa76aa363f5e00454b6c602">
              Vantage
              <div className="second-menu" />
              <div className="bottom-line" />
            </li>
            <li>
              DB11
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76bcb63f5e00454b6c604">
              Paride S
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76bdb63f5e00454b6c605">
              Vanquish S
              <div className="bottom-line" />
            </li>
          </ul>
          <ul>
            <li>
              Urus
              <div className="second-menu" />
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76c0563f5e00454b6c607">
              Huracan
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76c1463f5e00454b6c608">
              Aventador
              <div className="bottom-line" />
            </li>
            <li>
              Concept
              <div className="bottom-line" />
            </li>
          </ul>
          <ul>
            <li>
              718
              <div className="second-menu" />
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76c5763f5e00454b6c60b">
              911
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76c6363f5e00454b6c60c">
              Panamera
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76c6b63f5e00454b6c60d">
              Macan
              <div className="bottom-line" />
            </li>
            <li>
              Cayenne
              <div className="bottom-line" />
            </li>
          </ul>
          <ul>
            <li data-id="5aa76c9963f5e00454b6c60f">
              488 Pider
              <div className="second-menu" />
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76ca563f5e00454b6c610">
              GTC4 Lusso T
              <div className="bottom-line" />
            </li>
            <li>
              812SuperFAST
              <div className="bottom-line" />
            </li>
            <li data-id="5aa76cb963f5e00454b6c612">
              LaFerrari
              <div className="bottom-line" />
            </li>
            <li>
              Portofine
              <div className="bottom-line" />
            </li>
          </ul>
        </div>

        <section
          className="slider-wrap carousel slide"
          id="carouselExampleIndicators"
          data-ride="carousel"
        >
          <ol className="carousel-inner">
            <li className="carousel-item active">
              <img src="http://cdntbs.astonmartin.com/sitefinity/banners/new-vantage-carousel.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  Vantage<em />
                </h1>
                <p>美丽难以驯服</p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>

            <li className="carousel-item ">
              <img src="http://cdntbs.astonmartin.com/sitefinity/homepage-carousel/vanquish-s-ultimate_02-carousel.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  Vanquish S Ultimate<em />
                </h1>
                <p>
                  Vanquish S Ultimate是以Vanquish
                  S的设计风格为基础，拥有三种雅致的外部和内饰主题，其体现了过往六年的“绝佳Vanquish”风范。
                </p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  图库
                </a>
              </div>
            </li>

            <li className="carousel-item ">
              <img src="http://cdntbs.astonmartin.com/sitefinity/banners/aston-martin-vulcan-release-banner2.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  Vanquish S<em />
                </h1>
                <p>
                  通过提升的性能、工艺和奢华，Vanquish
                  S体现了阿斯顿马丁的真实内在本质。
                </p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>

            <li className="carousel-item">
              <img src="http://cdntbs.astonmartin.com/sitefinity/news-images/v8-powered-db11_09-carousel.jpg?sfvrsn=2" />
              <div className="infoBlock col-4">
                <h1>
                  DB11<em />
                </h1>
                <p>
                  卓越的性能与提升的功效相结合，使得DB11的特性更加雄厚，DB11现可提供4公升双涡轮增压V8发动机。{" "}
                </p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>

            <li className="carousel-item">
              <img src="http://cdntbs.astonmartin.com/sitefinity/homepage-carousel/am_cali_shot_9_upper_profile_vr_rt5-homepage1.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  DB11 Volante<em />
                </h1>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>

            <li className="carousel-item">
              <img src="http://cdntbs.astonmartin.com/sitefinity/homepage-carousel/zh-home-rapide-s.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  DB11<em />
                </h1>
                <p>
                  卓越的性能与提升的功效相结合，使得DB11的特性更加雄厚，DB11现可提供4公升双涡轮增压V8发动机。{" "}
                </p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>

            <li className="carousel-item">
              <img src="http://cdntbs.astonmartin.com/sitefinity/homepage-carousel/5amr-v8-homepagejuly201717D5EDB97B49E6731244333D.jpg?sfvrsn=0" />
              <div className="infoBlock col-4">
                <h1>
                  Vantage AMR<em />
                </h1>
                <p>Vantage AMR – 强悍出世</p>
                <ul>
                  <li>
                    <a href="" className="link-internal white">
                      新闻稿
                    </a>
                  </li>
                  <li>
                    <a href="#" className="link-internal white view-gallery">
                      图库
                    </a>
                  </li>
                </ul>
                <a href="" id="btn-a">
                  发现
                </a>
              </div>
            </li>
          </ol>
          <ul className="wrap-ul-bot carousel-indicators">
            <li
              data-target="#carouselExampleIndicators"
              data-slide-to="0"
              className="active"
            />
            <li data-target="#carouselExampleIndicators" data-slide-to="1" />
            <li data-target="#carouselExampleIndicators" data-slide-to="2" />
            <li data-target="#carouselExampleIndicators" data-slide-to="3" />
            <li data-target="#carouselExampleIndicators" data-slide-to="4" />
            <li data-target="#carouselExampleIndicators" data-slide-to="5" />
            <li data-target="#carouselExampleIndicators" data-slide-to="6" />
          </ul>
          <a
            className="carousel-control-prev"
            href="#carouselExampleIndicators"
            role="button"
            data-slide="prev"
          >
            <span className="carousel-control-prev-icon" aria-hidden="true" />
            <span className="sr-only">Previous</span>
          </a>
          <a
            className="carousel-control-next"
            href="#carouselExampleIndicators"
            role="button"
            data-slide="next"
          >
            <span className="carousel-control-next-icon" aria-hidden="true" />
            <span className="sr-only">Next</span>
          </a>

          <div className="process-div" />
        </section>

        <p className="product-p">All Products Show</p>
        <section className="product-list" />
        <FooterAll/>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    list: state.lists
  };
};
export default connect(mapStateToProps, { fetchList })(List);
